import React, { useEffect } from 'react'
import ReactECharts from 'echarts-for-react'
import { useAppStore } from '@/store'
import services from '@/api/services'

interface ChartProps {
  title?: string
  type?: 'bar' | 'line' | 'pie'
}

const Chart: React.FC<ChartProps> = ({ title = '销售数据统计', type = 'bar' }) => {
  const { chartData, updateUser } = useAppStore()

  // useEffect(() => {
  //   services.weather.getMultiStationDailyForecast().then(res => {
  //     console.log('多个场站每日预测', res)
  //   })
  // }, [])

  const getOption = () => {
    const baseOption = {
      title: {
        text: title,
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['销售额'],
        top: 30,
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: chartData.categories,
        axisTick: {
          alignWithLabel: true,
        },
      },
      yAxis: {
        type: 'value',
      },
    }

    if (type === 'bar') {
      return {
        ...baseOption,
        series: [
          {
            name: '销售额',
            type: 'bar',
            data: chartData.sales,
            itemStyle: {
              color: '#1890ff',
            },
          },
        ],
      }
    } else if (type === 'line') {
      return {
        ...baseOption,
        series: [
          {
            name: '销售额',
            type: 'line',
            data: chartData.sales,
            smooth: true,
            itemStyle: {
              color: '#52c41a',
            },
            areaStyle: {
              color: 'rgba(82, 196, 26, 0.2)',
            },
          },
        ],
      }
    } else if (type === 'pie') {
      const pieData = chartData.categories.map((name, index) => ({
        name,
        value: chartData.sales[index],
      }))

      return {
        title: {
          text: title,
          left: 'center',
          textStyle: {
            color: '#333',
            fontSize: 16,
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: chartData.categories,
        },
        series: [
          {
            name: '销售额',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['60%', '60%'],
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
    }
  }

  return <ReactECharts option={getOption()} style={{ height: '400px', width: '100%' }} opts={{ renderer: 'canvas' }} />
}

export default Chart
